<template>
  <div class="reg">
    <!-- 导航栏 -->
    <van-nav-bar title="注册" left-arrow @click-left="onClickLeft" />
    <!-- form表单 -->
    <van-form>
      <van-field
        v-model="phone"
        name="phone"
        placeholder="请填写手机号"
        left-icon="icon iconfont icon-shouji1"
        :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }]"
      />
      <!-- 以字母开头，长度在6~10之间，只能包含字母、数字和下划线 -->
      <van-field
        v-model="pwd"
        name="pwd"
        type="password"
        placeholder="请设置6-10位登录密码"
        left-icon="icon iconfont icon-mima"
        :rules="[{ pattern: /^[a-zA-Z]\w{5,9}$/, message: '请输入正确的密码' }]"
      />
      <van-field
        v-model="email"
        name="email"
        placeholder="请填写邮箱"
        left-icon="icon iconfont icon-yanzhengma"
        :rules="[
          {
            pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
            message: '请输入正确的格式邮箱',
          },
        ]"
      />
      <van-checkbox
        v-model="checked"
        checked-color="rgb(222, 196, 155)"
        icon-size="14px"
      >
        我已阅读并同意<span class="xieyi">《用户注册协议》</span>
      </van-checkbox>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          :disabled="!checked"
          @click="onRegister"
          >立即注册</van-button
        >
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" @click="onToLogin"
          >已有账号，立即登录</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      phone: "",
      email: "",
      pwd: "",
      checked: false,
    };
  },
  methods: {
    onClickLeft() {
      // 跳转到首页
      this.$router.push("/");
    },
    onRegister() {
      if (this.phone && this.pwd && this.email) {
        this.axios
          .post(
            "/v1/users/register",
            `phone=${this.phone}&upwd=${this.pwd}&email=${this.email}`
          )
          .then((result) => {
            console.log(result.data);
            if (result.data.code === 200) {
              Toast({
                message: "注册成功",
                position: "bottom",
                duration: 1000,
              });
              setTimeout(() => {
                this.$router.push("/login");
              }, 1200);
            } else {
              Toast({
                message: "注册失败",
                position: "bottom",
                duration: 1000,
              });
            }
          });
      }
    },
    onToLogin() {
      this.$router.push("/login");
    },
  },
};
</script>

<style>
.reg .van-nav-bar {
  background-color: rgb(222, 196, 155);
}
.reg .van-nav-bar .van-icon {
  font-size: 24px;
  color: #fff;
}
.reg .van-nav-bar__title {
  color: #fff;
  font-size: 20px;
}
.reg .van-cell {
  font-size: 13px;
  width: 90%;
  margin-left: 20px;
  margin-top: 20px;
}
.reg .van-field__control {
  margin-left: 10px;
}
.reg .van-checkbox {
  font-size: 12px;
  margin-top: 20px;
  margin-left: 36px;
}
.reg .van-checkbox .xieyi {
  color: rgb(222, 196, 155);
}
.reg .van-button {
  background-color: rgb(222, 196, 155);
  border: 1px solid rgb(222, 196, 155);
  margin-top: 20px;
}
.reg .van-form > div:nth-child(6) button {
  background-color: #fff;
  border: 1px solid rgb(222, 196, 155);
  color: rgb(222, 196, 155);
}
</style>